Quick Basic 4.5 Graphics. Tutorial #1 - The basics

This tutorial will assume you have never used Graphics before in quick basic or in any other programming language. This tutorial will also only show you how to use the "primitives" as their called in Quick basic. (ie. line and circle).

Commands covered

Before we jump into creating graphics we first have to tell the computer we want to work with graphics. When you first run a program it's in text mode. The command we want to use is "SCREEN". The format for the screen statement is,

SCREEN [mode][,[colorswitch]][,[activepage]][,[visualpage]]

"Mode" tells the computer what graphics mode is going to be used(more on modes later).
"Colorswitch" is used for monochrome monitors only and has no real use anymore so leave it blank.
"Activepage" Tells the computer to make this page active. All work will be done on this page. The number of pages depends on the mode.
"Visualpage" Tells the computer to make this page Visual.

Screen modes
Mode	Description
SCREEN 0: Text only	Either 40 x 25, 40 x 43, 40 x 50, 80 x 25, 80 x 43, or 80 x 50 text format with 8 x 8 character box size (8 x 14, 9 x 14, or 9 x 16 with EGA or VGA) 16 colors assigned to 2 attributes 16 colors assigned to any of 16 attributes (with CGA or EGA) 64 colors assigned to any of 16 attributes (with EGA or VGA)
SCREEN 1: 320 x 200 graphics	40 x 25 text format, 8 x 8 character box 16 background colors and one of two sets of 3 foreground colors assigned using COLOR statement with CGA 16 colors assigned to 4 attributes with EGA or VGA
SCREEN 2: 640 x 200 graphics	80 x 25 text format with character box size of 8 x 8 16 colors assigned to 2 attributes with EGA or VGA
SCREEN 3: Hercules adapter required, monochrome monitor only: 720 x 348 graphics	80 x 25 text format, 9 x 14 character box 2 screen pages (1 only if a second display adapter is installed) PALETTE statement not supported
SCREEN 4: 640 x 400 graphics	Supports Olivetti (R) Personal Computers models M24, M240, M28, M280, M380, M380/C, M380/T and AT&T (R) Personal Computers 6300 series 80 x 25 text format, 8 x 16 character box 1 of 16 colors assigned as the foreground color (selected by the COLOR statement); background is fixed at black. Warning: Olivetti personal computers running 3XBOX under OS/2 should avoid this screen mode.
SCREEN 7: 320 x 200 graphics	40 x 25 text format, character box size 8 x 8 32K page size, page ranges are 0-1 (64K), 0-3 (128K), or 0-7 (256K) Assignment of 16 colors to any of 16 attributes
SCREEN 8: 640 x 200 graphics	80 x 25 text format, 8 x 8 character box 64K page size, page ranges are 0 (64K), 0-1 (128K), or 0-3 (246K) Assignment of 16 colors to any of 16 attributes
SCREEN 9: 640 x 350 graphics	80 x 25 or 80 x 43 text format, 8 x 14 or 8 x 8 character box size 64K page size, page range is 0 (64K); 128K page size, page range is 0 (128K) or 0-1 (256K) 16 colors assigned to 4 attributes (64K adapter memory), or 64 colors assigned to 16 attributes (more than 64K adapter memory)
SCREEN 10: 640 x 350 graphics, monochrome monitor only	80 x 25 or 80 x 43 text format, 8 x 14 or 8 x 8 character box size 128K page size, page range is 0 (128K) or 0-1 (256K) Up to 9 pseudocolors assigned to 4 attributes
Screen 11: 640 x 480 graphics	80 x 30 or 80 x 60 text format, character box size of 8 x 16 or 8 x 8 Assignment of up to 256K colors to 2 attributes
Screen 12: 640 x 480 graphics	80 x 30 or 80 x 60 text format, character box size of 8 x 16 or 8 x 8 Assignment of up to 256K colors to 16 attributes VGA required
Screen 13: 320 x 200 graphics	40 x 25 text format, character box size of 8 x 8 Assignment of up to 256K colors to up to 256 attributes

Now that you know about the screen statement lets show you a few examples of how to use it.

SCREEN 13

This statement puts the monitor into screen mode 13. This is the mode that most games are made in as it offers 256 colors.

SCREEN 7,,0,1

In the above example the screen is set to mode 7 (320X200 at 16 colors) with video page 0 being active ready to be drawn on and video page 1 being displayed. If a screenmode has the ability to use video pages then USE THEM! It will reduce screen flicker. Sadly if you run any vga mode you can't use video pages.screen 9 offers the best graphics while still offering video pages(if you have a 128k ega adapter or better).

Now lets see just how the computer sees the screen.

The computer gives each point on the screen a set of 3 numbers.

1.an x coordinate

2.a y coordinate

3.a color

The X coordinate is a number that comes from along the top of the screen While the Y coordinate is a number that comes from the left side of the screen. Both x and y meat in the upper left side at point (0,0). Because the computer starts counting from 0 a screen that's 320X200 will have 319 as the largest possible x and 199 as the largest possible y. The color starts at 0 and it's max will depend on the screen mode you choose.

In the above example a black dot has been placed at (1,2). This is how all- screenmodes work.

Now it's time to introduce you to your first "primitive". PSET is the simplest drawing function.

format: PSET (X,Y),C

the x and y are the coordinates while the c is the color of the point. Now lets do something useful with the pset command while at the same time testing what we have learned at the same time.

lets draw a line from (10,10) to (10,20)

screen 13 ' this puts us into 320X200 256 color graphics
for y=10 to 20 ' This sets up a loop starting at 10 and ending at 20
pset (10,y),1 'This draws a point at (10,y) in color 1
next y 'if there is more numbers to loop through then loop
end 'Quits the program

Now I be your asking yourself if there is a easier way to draw a line. Luckily their is as qbasic has a built in command just for that and more.

Format: LINE (x1, y1)-(x2, y2) [, [color], [B|BF], [style]]

x1 and y1 is the start of the line while x2 and y2 is the end of the line.

Color is well the color of the line :-)

"b" and "bf" both create a box with corners at x1-y1 and x2-y2. "b" creates an outline of a box while bf creates a solid box.

"style" is used to create dashed lines and is outside of the scope of this tutorial.

lets look at that last program again and see what we can do to make it simpler.

screen13 ' this is still needed
for y=10 to 20 ' This can go as the line statement will do the looping for us
pset (10,y),1 'This needs to be changed to a line command
next y 'This to can go
end 'Quits the program

here is what we end up with

screen13
line (10,10)-(10,20),1
end 'Quits the program

Even though this is a simple program and what we did will have little impact on the program it's good to adopt good programming skills early because later when your programs start growing to hundreds of lines you'll want to trim things down as much as you can.

Now lets draw a box instead of a line.

screen13
line (10,10)-(10,20),1,b
end 'Quits the program

Simple right. Now what about a filled box?

screen13
line (10,10)-(10,20),1,bf
end 'Quits the program

Now for the last command

CIRCLE

format: CIRCLE (x, y), radius [, [color],[start], [stop], [ratio]]

The circle command has several functions that go beyond the scope of a basic tutorial so I'll just cover drawing a basic circle.

For those who are a bit rusty on their math the radius of a circle of 1/2 it's diameter. So if you want to draw a circle that's 20 pixels wide you'll need a radius of 10.

The program below draws a circle at point (50,50) in color 2 and is 30 pixels wide.

The next tutorial will introduce us to sprites and how they work.

BACK